<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-12 07:41:22
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-18 16:03:58
 * @FilePath: \vue3_admin_template\project\src\views\screen\component\Year\year.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
-->
<template>
  <div class="box7">
    <p class="title">年度游客量对比</p>
    <p class="bg"></p>
    <div class="echart" ref="echart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

import '@/utils/echartWordCloud/index.js'
//获取图形图表的DOM节点
let echart = ref()
let myEcharts = ref()
const colorList = [
  [
    '#ff7f50',
    '#87cefa',
    '#da70d6',
    '#32cd32',
    '#6495ed',
    '#ff69b4',
    '#ba55d3',
    '#cd5c5c',
    '#ffa500',
    '#40e0d0',
    '#1e90ff',
    '#ff6347',
    '#7b68ee',
    '#d0648a',
    '#ffd700',
    '#6b8e23',
    '#4ea397',
    '#3cb371',
    '#b8860b',
    '#7bd9a5',
  ],
  [
    '#ff7f50',
    '#87cefa',
    '#da70d6',
    '#32cd32',
    '#6495ed',
    '#ff69b4',
    '#ba55d3',
    '#cd5c5c',
    '#ffa500',
    '#40e0d0',
    '#1e90ff',
    '#ff6347',
    '#7b68ee',
    '#00fa9a',
    '#ffd700',
    '#6b8e23',
    '#ff00ff',
    '#3cb371',
    '#b8860b',
    '#30e0e0',
  ],
  [
    '#929fff',
    '#9de0ff',
    '#ffa897',
    '#af87fe',
    '#7dc3fe',
    '#bb60b2',
    '#433e7c',
    '#f47a75',
    '#009db2',
    '#024b51',
    '#0780cf',
    '#765005',
    '#e75840',
    '#26ccd8',
    '#3685fe',
    '#9977ef',
    '#f5616f',
    '#f7b13f',
    '#f9e264',
    '#50c48f',
  ],
][2]
const option = {
  // 图表标题
  title: {
    show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
    text: '2025年前5年各个景区游客量对比   ', //主标题文本，'\n'指定换行
    x: 'center', // 水平安放位置，默认为左对齐，可选为：
    // 'center' ¦ 'left' ¦ 'right'
    // ¦ {number}（x坐标，单位px）
    y: 'bottom', // 垂直安放位置，默认为全图顶端，可选为：
    // 'top' ¦ 'bottom' ¦ 'center'
    // ¦ {number}（y坐标，单位px）
    //textAlign: null          // 水平对齐方式，默认根据x设置自动调整
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc', // 标题边框颜色
    borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
    padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
    // 接受数组分别设定上右下左边距，同css
    itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
    textStyle: {
      fontSize: 18,
      fontWeight: 'bolder',
      color: '#333', // 主标题文字颜色
    },
    subtextStyle: {
      color: '#aaa', // 副标题文字颜色
    },
  },
  backgroundColor: '#fff',
  tooltip: {},
  animationDurationUpdate: function (idx: any) {
    // 越往后的数据延迟越大
    return idx * 100
  },
  animationEasingUpdate: 'bounceIn',
  color: ['#fff', '#fff', '#fff'],
  series: [
    {
      type: 'graph',
      layout: 'force',
      force: {
        repulsion: 500,
        edgeLength: 10,
      },
      roam: true,
      label: {
        normal: {
          show: true,
        },
      },
      data: [
        {
          name: '2024年\n\n2356次',
          value: 1,
          symbolSize: 150,
          draggable: true,
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: colorList[5],
              color: colorList[5],
            },
          },
        },
        {
          name: '2023\n\n4568次',
          value: 1,
          symbolSize: 150,
          draggable: true,
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: colorList[8],
              color: colorList[8],
            },
          },
        },
        {
          name: '2022\n\n456812次',
          value: 2,
          symbolSize: 150,
          draggable: true,
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: colorList[12],
              color: colorList[12],
            },
          },
        },
        {
          name: '2021\n\n4556135次',
          value: 2,
          symbolSize: 150,
          draggable: true,
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: colorList[13],
              color: colorList[13],
            },
          },
        },
        {
          name: '2020\n\n451645次',
          value: 3,
          symbolSize: 150,
          draggable: true,
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: colorList[14],
              color: colorList[14],
            },
          },
        },
        {
          name: '2019\n\n1531566次',
          value: 5,
          symbolSize: 200,
          draggable: true,
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: colorList[16],
              color: colorList[16],
            },
          },
        },
        {
          name: '2018\n\n154913次',
          value: 7,
          symbolSize: 200,
          draggable: true,
          itemStyle: {
            normal: {
              shadowBlur: 10,
              shadowColor: colorList[19],
              color: colorList[19],
            },
          },
          url: 'https://gallery.echartsjs.com/preview.html?c=xPLngHx_Z&v=1',
        },
      ],
    },
  ],
}

onMounted(() => {
  //初始化Echarts实例
  myEcharts.value = echarts.init(echart.value)
  //  初始化配置项
  myEcharts.value.setOption(option)
})
</script>

<style lang="scss" scoped>
.box7 {
  margin: 10px 0px 0 0;
  width: 100%;
  height: 100%;
  background: url('../../images/dataScreen-main-cb.png') no-repeat;
  background-size: 100% 100%;
  .title {
    color: #fff;
    font-size: 20px;
    margin-top: 25px;
  }
  .bg {
    width: 68px;
    height: 7px;
    background: url('../../images/dataScreen-title.png') no-repeat;
    background-size: 100% 100%;
    margin: 10px 0 0 20px;
  }

  .echart {
    width: 100%;
    height: calc(100% - 50px);
    // background-color: red;
  }
}
</style>
